<script setup>
import router from '@/router';
import {NavBar,Image,Field,Button, Toast} from 'vant';
import {ref} from 'vue';
import http from '@/http';
const keyword = ref('')
const onClickLeft = () => {
  router.back();
}

const plat = ref([])
const choosePlat = (e) => {
  if(plat.value.includes(e)){
    plat.value = plat.value.filter(item => item!=e)
  }else{
    plat.value.push(e)
  }
}

const startNow = () => {
      auto.invoke(
        'runRobotNow',
        [{ robot: require('@/auto/robot/robot.all'), keyword:keyword.value, plat:plat.value,storeId:JSON.parse(localStorage.getItem('shop')).shopDescription }],
        () => {

        },
      )
}
const stop = () => {
console.log(auto.invoke);
  auto.invoke('robotStop', [], () => { })
}
const isStart = ref(false)
const start = () => {
  if(!plat.value.length)return Toast('请先选择抓取平台')
  if(!keyword.value)return Toast('请先输入关键词')
  if(!isStart.value){
    startNow()
    isStart.value = true
  }else{
    stop()
    isStart.value = false
  }
}


</script>

<template>
  <NavBar
     style="height: 15vw;line-height:15vw"
      title="范围搜索"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      safe-area-inset-top
      clickable
    />
  <div class="page">
      <div class="top-title">抓取平台</div>
      <div class="pingtais">
        <div class="item" @click="choosePlat(1)" :class="plat.includes(1)?'active':''">
          <img class="item-img" src="@/assets/img/home_icon_dyin.png" alt="">
          <p>抖音</p>
        </div>
        <div class="item" @click="choosePlat(2)" :class="plat.includes(2)?'active':''">
          <img class="item-img" src="@/assets/img/home_icon_kshou.png" alt="">
          <p>快手</p>
        </div>
        <div class="item" @click="choosePlat(3)" :class="plat.includes(3)?'active':''">
          <img class="item-img" src="@/assets/img/home_icon_xhshu.png" alt="">
          <p>小红书</p>
        </div>
        <div class="item" @click="choosePlat(4)" :class="plat.includes(4)?'active':''">
          <img class="item-img" src="@/assets/img/home_icon_sphao.png" alt="">
          <p>视频号</p>
        </div>
      </div>
      <div class="top-title">行业关键词</div>
      <van-field class="input" v-model="keyword" placeholder="请输入关键词" />
      <Button class="btn" round block type="primary" native-type="submit" @click="start">{{isStart?'停止':'开始抓取'}}</Button>
  </div>
</template>

<style scoped>
  ::v-deep .van-nav-bar__content{
        height: 100%;
    }
  .page{
    padding: 0 3vw;
    background-color: rgb(245,247,250);
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .top-title{
    font-size: 4.27vw;
    font-weight: 500;
    margin-top: 4vw;
  }
  .pingtais{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 3vw 0 5vw;
  }
  .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 21vw;
    height: 24vw;
    border-radius: 2vw;
    background-color: #fff;
    border: 1px solid rgb(220,223,230);
  }
  .active{
    background-color: rgba(64,158,255,0.05);
    border: 0.27vw solid rgb(64,158,255);
  }
  .item-img{
    width: 8vw;
    height: 8vw;
  }
  .item p{
    font-size: 3.73vw;
    color: rgb(69,70,74);
    margin: 0;
    margin-top: 1vw;
  }
  .input{
    margin-top: 3vw;
    margin-bottom: 7vw;
  }
  .btn{
    width: 80vw;
    height: 12vw;
    font-size: 4.27vw;
    margin:0 auto;
  }
</style>